import { computed } from 'vue';
// import { EChartsOption } from 'echarts';
// import { useAppStore } from '@/store';

// for code hints
// import { SeriesOption } from 'echarts';
// Because there are so many configuration items, this provides a relatively convenient code hint.
// When using vue, pay attention to the reactive issues. It is necessary to ensure that corresponding functions can be triggered, TypeScript does not report errors, and code writing is convenient.
// interface optionsFn {
//   (isDark: boolean): EChartsOption;
// }

export default function useChartOption(sourceOption) {
  // const appStore = useAppStore();
  const isDark = computed(() => true)
  // const isDark = computed(() => {
  //   return appStore.theme === 'dark';
  // });
  // echarts support https://echarts.apache.org/zh/theme-builder.html
  // It's not used here
  // TODO echarts themes
  const lineOption = computed(() => {
    return sourceOption(isDark.value);
  });
  const barOption = computed(() => {
    return sourceOption(isDark.value);
  });
  const pieOption = computed(() => {
    return sourceOption(isDark.value);
  });
  return {
    lineOption,
    pieOption,
    barOption
  };
}
